<template>
  <div class="login">
    <div class="form-wrapper">
      <div class="login-tab">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="登录" name="login"></el-tab-pane>
          <el-tab-pane label="注册" name="register"></el-tab-pane>
        </el-tabs>
      </div>
      <el-form :model="loginForm" status-icon label-width="60px" label-position="left" v-show="activeTab=='login'">
        <el-form-item label="账号" >
          <el-input type="text" v-model="loginForm.userName" auto-complete="off" @keydown.enter.native="login"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="loginForm.userPassword" auto-complete="off" @keydown.enter.native="login"></el-input>
        </el-form-item>
        <el-button type="primary" @click="login" class="login-btn">登录</el-button>
      </el-form>
      <el-form :model="registerForm" status-icon label-width="60px" label-position="left" v-show="activeTab=='register'">
        <el-form-item label="账号">
          <el-input type="text" v-model="registerForm.userName" auto-complete="off" @keydown.enter.native="login"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="registerForm.userPassword" auto-complete="off" @keydown.enter.native="login"></el-input>
        </el-form-item>
        <el-form-item label="标签">
          <el-checkbox-group v-model="registerForm.labelList">
            <el-checkbox :label="labelItem.id" v-for="(labelItem,index) in allLabelList" :key="index">{{labelItem.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-button type="primary" @click="register" class="login-btn">注册</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      activeName: "login",
      loginForm: {
        userName: "",
        userPassword: ""
      },
      registerForm: {
        userName: "",
        userPassword: "",
        labelList: []
      },
      activeTab: "login",
      allLabelList: []
    };
  },
  methods: {
    ...mapActions({
      _login: "login",
      _register: "register",
      _getLabelList: "getLabelList"
    }),
    async getLabelList() {
      const res = await this._getLabelList();
      if (res.code == 0) {
        this.allLabelList = res.data.label_list;
      }
    },
    async login() {
      if (!this.loginForm.userName) {
        this.$message.error("用户名不能为空！！！");
        return;
      }
      if (!this.loginForm.userPassword) {
        this.$message.error("用户密码不能为空！！！");
        return;
      }
      const res = await this._login({
        username: this.loginForm.userName,
        password: this.loginForm.userPassword
      });
      if (res.code == 0) {
        this.$router.push({ name: "Index" });
      } else {
        this.$message.error(res.msg);
      }
    },
    async register() {
      if (!this.registerForm.userName) {
        this.$message.error("用户名不能为空！！！");
        return;
      }
      if (!this.registerForm.userPassword) {
        this.$message.error("用户密码不能为空！！！");
        return;
      }
      let params = {
        username: this.registerForm.userName,
        password: this.registerForm.userPassword,
        label_list: JSON.stringify(this.registerForm.labelList)
      };
      const res = await this._register(params);
      if (res.code == 0) {
        this.$message.success("注册成功！！！");
        this.activeTab = "login";
        this.activeName = "login";
        this.registerForm.userName = "";
        this.registerForm.userPassword = "";
        this.registerForm.labelList = [];
      } else {
        this.$message.error(res.msg);
      }
    },
    handleClick(el) {
      if (el.name == "login") {
        this.activeTab = "login";
      } else if (el.name == "register") {
        this.activeTab = "register";
        this.getLabelList();
      }
    }
  },
  mounted() {}
};
</script>

<style>
.login {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.form-wrapper {
  width: 400px;
  margin: 15vh auto 0;
  border: 1px solid #dcdfe6;
  padding: 30px 20px;
}
.login-tab {
  margin-bottom: 30px;
}
.login-btn {
  width: 100%;
  margin-top: 20px;
}
.login .el-tabs--left .el-tabs__item.is-left {
  text-align: left;
}
.login .el-checkbox {
  margin-right: 30px;
}
.login .el-checkbox + .el-checkbox {
  margin-left: 0px;
}
</style>
